<template>
	<view style="overflow: hidden;">
		<view class="usernameBox">
			<text>手机号</text>
			<view class="cell">
				<input v-model="revisePhone" maxlength="11" placeholder-style="color:#484848;" placeholder="请输入手机号"
					type="number" disabled="disabled">
			</view>
		</view>
		<view class="login" @click="nextclick()">
			<view class="login_btn">
				<text>发送验证码</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				revisePhone: '', //手机号
				androidIos: '',
				source: ''

			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow(e) {
			this.revisePhone = this.userInfo.phone || ''; //渲染手机号到修改密码页面
			// console.log(this.revisePhone);
		},
		onLoad() {
			this.androidIos = getApp().globalData.androidIos
			this.source = getApp().globalData.source
		},
		methods: {
			...mapMutations(['setUserInfo']),
			// 点击下一步发送验证码
			nextclick() {
				let data = {
					phone: this.revisePhone,
					appId: this.androidIos
				}
				this.$httpNew
					.get('authApi/auth/GetVerificationCodeByForget', data)
					.then(res => {
						console.log(res);
						if (res == null) {
							uni.showToast({
								title: '验证码已发送',
								icon: 'none'
							});
							uni.navigateTo({
								url: './message_authentication'
							});
						}
					}).catch(err => {
						console.log(err);
						if (err.errMsg == '[A0006] 验证码已发送，请勿重新点击') {
							uni.navigateTo({
								url: './message_authentication'
							});
						}
					})
			}
		}
	}
</script>

<style lang="less">
	.usernameBox {
		padding: 0 40rpx;
	}

	.usernameBox text {
		color: #000;
		font-weight: 500;
		font-size: 50rpx;
		display: block;
		line-height: 180rpx;
	}

	.cell {
		border-bottom: 4rpx solid #B5001E;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.login {
		margin-top: 40rpx;
		width: 100%;
		height: 140rpx;
		padding: 0 40rpx;
		text-align: center;
	}

	.login .login_btn {
		line-height: 90rpx;
		color: #fff;
		font-size: 36rpx;
		margin-bottom: 50rpx;
		width: 90%;
		height: 90rpx;
		background-color: #b5001e;
		border-radius: 50rpx;
	}
</style>
